<template>
    <div class="registration-container">
      <form @submit.prevent="registerUser">
        <div class="form-group">
          <label for="username" class="label">用户名:</label>
          <input type="text" id="username" v-model="username" required class="input" />
        </div>
        <div class="form-group">
          <label for="password" class="label">密码:</label>
          <input type="password" id="password" v-model="password" required class="input" />
        </div>
        <div class="form-group">
          <label for="confirmPassword" class="label">确认密码:</label>
          <input type="password" id="confirmPassword" v-model="confirmPassword" required class="input" />
        </div>
        <div class="btn-group">
          <button type="submit" class="btn btn-register">注册</button>
        </div>
      </form>
    </div>
  </template>
  
  <script setup>
  import axios from 'axios';
import { ref } from 'vue';
  
  const username = ref('');
  const password = ref('');
  const confirmPassword = ref('');
  
  const registerUser = () => {
    if (password.value !== confirmPassword.value) {
      alert('密码和确认密码不匹配！');
      return;
    }
    // 发送注册请求
    axios.post('/produce-api/path/register', {username:username.value, password:password.value})
    .then((response => {
      if (response.data.code == 200) {
        alert('注册成功！');
        // 注册成功后，跳转到登录页面
        window.location.href = '/login';
      } else {
        alert(`注册失败: ${response.data.msg}`);
      }
    })
  )
  };
  </script>
  
  <style scoped>
  .registration-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
  }
  
  form {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  .label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
  }
  
  .input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  .btn-group {
    display: flex;
    gap: 10px;
  }
  
  .btn {
    flex: 1;
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
  }
  
  .btn:hover {
    opacity: 0.8;
  }
  </style>